<template>
    <el-dropdown trigger="click">
        <div class="user-profile">
            <img class="user-profile__avatar" src="E:\newProject\xhaqdm_vue\src\assets\OIP-C.jpg" />
            <span class="user-profile__name">小虎爱钱钱钱钱钱</span>
        </div>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item @click="handleProfileClick">
                    用户信息
                </el-dropdown-item>
                <el-dropdown-item divided @click="logout">
                    登出
                </el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script setup>

</script>

<style scoped>
.navbar__right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar__right>* {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: var(--navbar-height);
  color: var(--el-text-color);
  text-align: center;
  cursor: pointer;
}

.navbar__right>*:hover {
  background: rgb(0 0 0 / 10%);
}

.navbar__right .user-profile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 13px;
}

.navbar__right .user-profile__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.navbar__right .user-profile__name {
  margin-left: 10px;
}

.layout-top .navbar__right--white>*,
.layout-mix .navbar__right--white>* {
  color: #fff;
}

.layout-top .navbar__right--white>* svg,
.layout-mix .navbar__right--white>* svg {
  color: #fff;
  fill: #fff;
}

.dark .navbar__right>*:hover {
  color: #ccc;
}
</style>